<template>
  <div>
    <p>Counter A: {{ counterA }}</p>
    <button @click="incrementA">Increment A</button>

    <p>Counter B: {{ counterB }}</p>
    <button @click="incrementB">Increment B</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState({
      counterA: state => state.a.counterA,
      counterB: state => state.b.counterB
    })
  },
  // computed: {
  //   ...mapState({
  //     a: state => state.a,
  //     b: state => state.b
  //   }),
  //   counterA: function (state) {
  //     return state.a.counterA;
  //   },
  //   counterB: function (state) {
  //     return state.b.counterB;
  //   }
  // }
  methods: {
    // 从 moduleA 映射 incrementA 方法
    ...mapActions('a', [
      'incrementA'
    ]),
    // 从 moduleB 映射 incrementB 方法
    ...mapActions('b', [
      'incrementB'
    ])
  }
};
</script>